<template>
  <div class="dashboard-editor-container">
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属公司">
        <el-select v-model="formInline.gongsiSel" @change="initData" placeholder="所属公司">
          <el-option v-for="val in gongsiList" :key="val.id" :label="val.name" :value="val.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="display: flex;justify-content: space-around;">
      <div v-if="devieceObj" id="main" style="width:400px;height:500px;" ref="chart"></div>
      <div>
        <el-table :data="deviceTableData" style="width:90%;margin-left: 100px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);">
          <el-table-column prop="name" label="设备名称"></el-table-column>
          <el-table-column prop="orderCount" label="订单总数量"></el-table-column>
          <el-table-column prop="orderAmount" label="订单总金额"></el-table-column>
        </el-table>
        <div>
        <div style="width: 90%;float: right;">
          <Pagination :total="total" :page="page+1" @pagination="pagination" />
        </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/index'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import { getRoutes, getRoles } from '@/api/role'
import { postDeviceFind, getDeviceTrend } from '@/api/Operation'
import * as echarts from 'echarts';

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    BoxCard,
    Pagination
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      allDate: '',
      rolesList: [],
      allDate: '',
      total: 0,
      page: 0,
      rolesList: [],
      orderDate:'',
      formInline: {
        gongsiSel: ''
      },
      gongsiList:[],
      devieceObj:{},
      deviceTableData:[]
    }
  },
  created(){
    this.gongsiList = JSON.parse(localStorage.getItem('companyList'));
    this.formInline.gongsiSel = this.gongsiList[0].id;
    this.initData();
  },
  methods: {
    initData(){
      var list = {
          "page": 0,
          "pageCount": 10,
          "searchCriteria": {
            "tenantId": this.formInline.gongsiSel,
          }
      };
      postDeviceFind(list).then((res)=>{
        this.deviceTableData = res.result.data;
        this.total = res.result.count;
      })
      getDeviceTrend(this.formInline.gongsiSel).then((res)=>{
        this.devieceObj = res.result.quality;
        var arr1= ["ll50", "ge50L100", "ge100L200", "ge200"];
        var arr2 = [
          {value:this.devieceObj.ll50, name:'<50￥'},
          {value:this.devieceObj.ge50L100, name:'≥50￥<100￥'},      
          {value:this.devieceObj.ge100L200, name:'≥100￥<200￥'},      
          {value:this.devieceObj.ge200, name:'≥200￥'},                
        ];
        setTimeout(()=>{
          this.echartInit(arr1,arr2);
        },1000)
      })
    },
    echartInit(arr1,arr2){
      var chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      var option;

      option = {
          legend: {
              top: 'bottom'
          },
          toolbox: {
              show: false
          },        
          series: [
              {
                  name: '面积模式',
                  width: '360px',
                  height: '540px',
                  top: '-46px',
                  left: '36px',
                  legendHoverLink: true,
                  stillShowZeroSum: true,
                  type: 'pie',
                  radius: [50, '70%'],
                  center: ['50%', '50%'],
                  roseType: 'radius',
                  itemStyle: {
                      borderRadius: 8
                  },
                  data: arr2
              }
          ]
      };
      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },    
    //分页
    pagination(data) {
      this.page = data-1;
      console.log(data)
      var list = {
          "page": this.page,
          "pageCount": 10,
          "searchCriteria": {
            "tenantId": this.formInline.gongsiSel,
          }
      };
      postDeviceFind(list).then((res)=>{
        this.deviceTableData = res.result.data;
        this.total = res.result.count;
      })
    },
    async getRoles() {
      const res = await getRoles()
      this.rolesList = res.data
    },
    //导出文件
    handleExport(){
      
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  padding: 10px;
  background: #fff;
}
.dashboard-editor-container {
  padding: 16px 32px;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .time{
    width: 100%;
    height: 36px;
    background: #fff;
    >div{
      float: right;
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
